<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色列表</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>

</head>
<body>
<div id="app">


    <el-button type="text" @click="functionsById">查看权限</el-button>
    <!-- 表单模态框区域 -->
    <el-button type="text" @click="dialogRoleFormVisible = true">添加角色</el-button>
    <el-dialog title="订单" :visible.sync="dialogRoleFormVisible" @close="closeDialog">
        <el-form :model="role">
            <el-form-item label="角色名">
                <el-input v-model="role.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="role.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveRole">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="全部权限" :visible.sync="dialogFormVisible">
        <el-tree
                :data="functions"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                @check="checkFunction">
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="cancel()">确 定</el-button>
        </div>
    </el-dialog>

    <el-table
            ref="multipleTable"
            @current-change="toggleSelection"
            :data="roles"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="描述">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.description }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current"
            @current-change="loadRoles">
    </el-pagination>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            roles: [], // 角色列表
            total: 0,
            current: 0,
            pageSize: 5,
            functions:[],
            currentRole:null,
            dialogFormVisible:false,
            dialogRoleFormVisible:false,
            role:{id:0},
            defaultProps: {
                children: 'subFunctions',
                label: 'name'
            }
        },
        methods: {
            //分页查询角色
            loadRoles(current) {
                axios.get("/roles/page?current=" + current)
                    .then(res => {
                    this.roles = res.data.data;
                this.total = res.data.total;
                this.current = res.data.current;
            });
            },
            loadFunctions() {
                axios.get("/functions")
                    .then(res => {
                        this.functions = res.data;
                });
            },
            cancel(){
                this.dialogFormVisible = false;
            },
            toggleSelection(row) {
                //当前行成为选择角色
                this.currentRole =row;
                //清空所有选择
                this.$refs.multipleTable.clearSelection();
                //吧角色选中，选中变成取消
                this.$refs.multipleTable.toggleRowSelection(this.currentRole);
            },
            functionsById(){
                if(this.currentRole){
                    this.dialogFormVisible = true;
                    axios.get("/functions/role/"+this.currentRole.id)
                        .then(res=>{
                            this.$refs.tree.setCheckedNodes(res.data)
                        })
                }else{
                    this.$message("你必须选择一个角色!");
                }

            },
            handleEdit(index, row) {
                 this.role = JSON.parse(JSON.stringify(row));
                 this.dialogRoleFormVisible=true;
            },
            handleDelete(index, row) {
                axios.delete("/role/"+row.id)
                    .then(res=>{
                        if(res.data==="ok"){
                            this.$message("删除角色成功")
                        }
                    })
            },
            checkFunction(fun,state){
                if (state.checkedNodes.includes(fun)){
                    axios.post("/role-function",{roleId:this.currentRole.id,funId:fun.id})
                        .then(res=>{
                            if(res.data==="ok"){
                                this.$message("添加权限成功")
                            }
                    })
                }else {
                    axios.delete("/role-function/"+this.currentRole.id+"/"+fun.id)
                        .then(res=>{
                            if (res.data==="ok"){
                                this.$message("删除权限成功")
                            }
                        })
                }
            },
            closeDialog(){
                this.role={id:0}
            },
            saveRole(){
                let role = JSON.parse(JSON.stringify(this.role));
                if (role.id!==0){
                    axios.put("/role",role)
                            .then(res=>{
                            if (res.data==="ok"){
                                this.dialogRoleFormVisible = false;
                                this.$message("修改角色成功！");
                                this.loadRoles();
                            }
                        })

                }else {
                    axios.post("/role",role)
                        .then(res=>{
                            if (res.data==="ok"){
                                this.dialogRoleFormVisible = false;
                                this.$message("添加角色成功！");
                                this.loadRoles();
                            }
                        })
                }

            }
        },
        mounted() {
            this.loadRoles(1);
            this.loadFunctions();
        }
    });
</script>
</body>
</html>